<template>
	<view class="addOrUpdateAddress">
		<view class="example">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" :modelValue="ItemList">
				<uni-forms-item label="姓名:" label-align="center" required name="name">
					<uni-easyinput v-model="ItemList.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="城市:" required label-align="center">
					<uni-data-picker :localdata="addressList" :map="{text:'name',value:'name'}" popup-title="请选择城市"
						@change="changeAddres" v-model="address"></uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="详细地址:" label-align="center" required name="detailAddress">
					<uni-easyinput v-model="ItemList.detailAddress" placeholder="请输入详细地址" />
				</uni-forms-item>

				<uni-forms-item label="手机号:" label-align="center" required name="phoneNumber">
					<uni-easyinput v-model="ItemList.phoneNumber" placeholder="请输入详细地址" />
				</uni-forms-item>

				<uni-forms-item label="邮政编号:" label-align="center">
					<uni-easyinput v-model="ItemList.postCode" placeholder="请输入详细地址" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @tap="submit">确定</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				ItemList: {
					city: "",
					defaultStatus: 0,
					detailAddress: "",
					name: "",
					phoneNumber: "",
					postCode: "",
					province: "",
					region: ""
				},
				TopTitle: "新增地址",
				addressList: [],
				address: "",
				Type: 0, //0添加   1修改
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请填写姓名',
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value == "") {
									callback('请填写姓名')
								}
								return true
							}
						}]
					},
					detailAddress: {
						rules: [{
							required: true,
							errorMessage: '请填写详细地址',
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value == "") {
									callback('请填写详细地址')
								}
								return true
							}
						}]
					},
					phoneNumber: {
						rules: [{
							required: true,
							errorMessage: '请填写手机号',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let reg = /^1[13456789]\d{9}$/
								if (value == "") {
									callback('请填写手机号')
								} else if (!reg.test(value)) {
									callback('请输入正确的手机号！')
								}
								return true
							}
						}]
					},

				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.baseForm.setRules(this.rules)
		},
		onLoad(options) {
			if (options.address) {
				this.ItemList = JSON.parse(options.address)
				this.TopTitle = "修改地址"
				this.Type = 1
				//  回显所在城市
				if (this.ItemList.region == "" && this.ItemList.city != "") {
					this.address = this.ItemList.city
				} else if (this.ItemList.city == "" && this.ItemList.region == "" && this.ItemList.province != "") {
					this.address = this.ItemList.province
				} else {
					this.address = this.ItemList.region
				}
			}
			uni.setNavigationBarTitle({
				title: this.TopTitle
			});
			this.getAddressArea()
		},
		methods: {
			getAddressArea() {
				this.$api.user.getaddressArea().then(res => {
					if (res.code == 200) {
						this.addressList = res.data
					}
				})
			},
			changeAddres(e) {
				this.ItemList.province = e.detail.value[0].value
				if (e.detail.value.length == 2) {
					this.ItemList.city = e.detail.value[1].value
				} else if (e.detail.value.length == 3) {
					this.ItemList.city = e.detail.value[1].value
					this.ItemList.region = e.detail.value[2].value
				}
			},
			submit() {
				this.$refs.baseForm.validate().then(res => {
					if (this.address == "") {
						uni.showToast({
							title: "请选择城市",
							icon: "error"
						})
					} else {
						if (this.Type == 1) { //修改
							console.log(JSON.stringify(this.ItemList));
							// this.$api.user.updateAddress(this.ItemList.id,this.ItemList).then(res=>{
							// 	console.log(res);
							// })
							uni.showToast({
								title:"敬请期待！",
								icon:"loading"
							})
								
						} else { //添加
							this.$api.user.addAddress(this.ItemList).then(res=>{
								if(res.code==200){
									uni.showToast({
										title:"新增成功！"
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},500)
								}
							})


						}
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addOrUpdateAddress {

		.example {
			margin-top: 20rpx;
		}

	}
</style>
